import FormLayout from "@/components/forms/formLayout"
import EasyFormProvider from "@/components/forms/EasyFormProvider"
import styled from "@emotion/styled"
import { useEmail } from "@/features/business/forms/form-types/email"

const InputWrapper = styled.div`
    position: relative;
    margin-top: 40rem;
    margin-bottom: 84rem;
    display: flex;
    width: 100%;
    flex-direction: column;
`

const Email = () => {
    const { isEmailForget, onSubmit, onBack } = useEmail()

    return (
        <FormLayout
            title={isEmailForget ? "Enter Email Address" : "Enter New email address"}
            description={
                isEmailForget
                    ? "Enter the email address associated with your account."
                    : "Please enter your current email address"
            }
            backPath="/s-account"
            onBack={onBack}
        >
            <InputWrapper>
                <EasyFormProvider
                    // @ts-ignore
                    onSubmit={onSubmit}
                    queryList={["emailNoPlaceholder", "submitButton"]}
                    buttonText="Confirm"
                />
            </InputWrapper>
        </FormLayout>
    )
}
export default Email
